<template>
	<view class="container">
		<u-navbar class="container_nav" :border-bottom="false" :title="data.title"
			:background="{ background: 'transparent' }" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<view class="container_image" :class="`container_${data.type}`">
			<view class="container_image--content">
				<u-image v-if="data.type == 'jobstick'" :src="url + '/static/topping_2.png'" width="640rpx"
					mode="widthFix"></u-image>
				<u-image v-if="data.type == 'emergency'" :src="url + '/static/emergent_2.png'" width="640rpx"
					mode="widthFix"></u-image>
				<u-image v-if="data.type == 'resume_package'" :src="url + '/static/resume_2.png'" width="640rpx"
					mode="widthFix"></u-image>
				<u-image v-if="data.type == 'job_refresh'" :src="url + '/static/refresh_2.png'" width="640rpx"
					mode="widthFix"></u-image>
				<u-image v-if="data.type == 'im'" :src="url + '/static/chat_2.png'" width="640rpx"
					mode="widthFix"></u-image>
			</view>
		</view>
		<u-pay :height="data.height" :list="data.list" :jobList="data.jobList" :type="data.type"></u-pay>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import development from '/config/development'
	import production from '/config/productions'
	const url = process.env.NODE_ENV === 'development' ? development.url : production.url;
	const data = reactive({
		title: '',
		type: '',
		height: null,
		list: [],
		jobList: []
	})
	onReady(() => {
		getNavHeight()
	})
	onLoad(({
		type
	}) => {
		data.type = type
		switch (type) {
			case 'jobstick':
				data.title = '职位置顶'
				break;
			case 'emergency':
				data.title = '紧急招聘'
				break;
			case 'resume_package':
				data.title = '简历包'
				break;
			case 'job_refresh':
				data.title = '智能刷新'
				break;
			case 'im':
				data.title = '职聊增值包'
				break;
		}
		getServiceList()
	})
	const getServiceList = async () => {
		let params = {
			type: data.type
		}
		let res = await uni.$u.api.company_serviceList({
			params
		})
		data.list = res.items
		data.jobList = res.joblist
	}
	const getNavHeight = async () => {
		let res = await uni.$u.getRect('.container_image')
		// #ifndef MP-WEIXIN
		data.height = res.height - uni.$u.sys().statusBarHeight + 'px'
		// #endif
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.height = res.height - menuButtonInfo.height - uni.$u.sys().statusBarHeight + 'px'
		// #endif
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		&_jobstick {
			background-image: url('https://zhaopin.mazhoudao.com/static/topping_1.png');
		}

		&_emergency {
			background-image: url('https://zhaopin.mazhoudao.com/static/emergent_1.png');
		}

		&_resume_package {
			background-image: url('/pages/pagesPersonal/static/toolMall/resume_1.png');
		}

		&_job_refresh {
			background-image: url('https://zhaopin.mazhoudao.com/static/refresh_1.png');
		}

		&_im {
			background-image: url('/pages/pagesPersonal/static/toolMall/chat_1.png');
		}

		&_image {
			background-size: 100% 100%;
			width: 100vw;
			height: 412rpx;
			position: fixed;
			top: 0;
			z-index: 99;

			&--content {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -10%);
			}
		}
	}
</style>